<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物招领系统 - 个人中心</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/system/css/all.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/system/css/select2.min.css}">
    <!--外观-->
    <link rel="stylesheet" th:href="@{/system/css/adminlte.min.css}">
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/system/css/toastr.min.css}">
    <style>
        .post-title-hover:hover {
            opacity: 0.5;
        }

        .nav-pills .nav-link.active {
            background-color: #0fd9c5;
        }

        .nav-pills .nav-link:not(.active):hover {
            color: #0fd9c5;
        }

        .btn-green {
            background-color: #0fd9c5;
            color: #FFFFFF
        }

        .btn-green:hover {
            background-color: #14b4a5;
            color: #FFFFFF
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/system/header::header-nav"></div>
    <div th:replace="pc/system/header::header-nav-model"></div>
    <!-- 主页 -->
    <div class="row" style="width: 100%; margin-top: 20px; justify-content: center">
        <div class="card card-outline" style="border-top: 3px solid #0fd9c5; width: 400px; height: 560px">
            <div class="card-body box-profile">
                <div class="text-center" style="display: flex; justify-content: center">
                    <a href="#" title="更换头像" id="openImg">
                        <div style="width: 100px; height: 100px">
                            <img class="profile-user-img img-fluid img-circle w-100 h-100"
                                 th:src="${session.user.profileUrl}"
                                 alt="User profile picture">
                        </div>
                    </a>
                    <input type="file" id="profile_img" name="profile_img" style="display: none">
                </div>
                <h3 class="profile-username text-center" th:text="${session.user.userName}"></h3>
                <p class="text-muted text-center">账号：<span th:text="${session.user.loginId}"></span></p>
                <div class="card-header" style="padding-left: 0">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="#introduction"
                               data-toggle="tab"><i class="nav-icon fa fa-id-card"></i>&nbsp;
                                个人信息
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#settings" data-toggle="tab"><i
                                    class="nav-icon fa fa-wrench"></i>&nbsp;
                                修改密码
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body" style="margin-left: -20px; margin-right: -20px">
                    <div class="tab-content">
                        <div class="active tab-pane" id="introduction">
                            <div class="form-group">
                                <i class="fas fa-signature"></i>
                                <label for="userName">昵称</label>
                                <input type="text" class="form-control" id="userName"
                                       placeholder="输入昵称（2-10位的中英文、数字、下划线）"
                                       th:value="${session.user.userName}">
                            </div>
                            <div class="form-group">
                                <i class="fas fa-phone-alt"></i>
                                <label for="userIntroduction">联系手机号</label>
                                <input type="text" class="form-control" id="userIntroduction"
                                       placeholder="输入手机号" th:value="${session.user.userIntroduction}">
                            </div>
                            <button id="updateNameAndIntroduction" class="btn btn-block btn-green">
                                <b>修 改</b>
                            </button>
                        </div>
                        <div class="tab-pane" id="settings">
                            <div class="form-group">
                                <i class="fas fa-unlock"></i>
                                <label for="oldPassword">原密码</label>
                                <input type="password" class="form-control" id="oldPassword"
                                       placeholder="输入原密码">
                            </div>
                            <div class="form-group">
                                <i class="fas fa-lock"></i>
                                <label for="newPassword">新密码</label>
                                <input type="password" class="form-control" id="newPassword"
                                       placeholder="密码格式为6-18位字母、数字">
                            </div>
                            <button id="updatePassword" class="btn btn-block btn-green">
                                <b>修 改</b>
                            </button>
                        </div>
                    </div>
                    <a th:href="@{/profile/logout}" class="btn btn-danger btn-block"
                       style="margin-top: 10px; margin-bottom: -20px; color: #FFFFFF">
                        <b>退 出</b>
                    </a>
                </div>
            </div>
        </div>
        <!-- 个人帖子 -->
        <div class="card card-outline" style="width: 600px; margin-left: 20px;border-top: 3px solid #ffc107">
            <div class="card-header">
                <h4 style="color: #ffc107"><b>我发布的</b></h4>
            </div>
            <div class="card-body">
                <div id='postBody' class="active tab-pane">
                    <!--<div class="post">
                        <a href="#" style="color: #000000">
                            <h4>标题</h4>
                        </a>
                        <h6 style="opacity: 0.5">
                            <span style="margin-right: 20px">柯基</span>
                            <span style="margin-right: 20px; color: #FF0000">丢失</span>
                            <i class="fas fa-eye"></i>&nbsp;
                            111
                        </h6>
                    </div>-->
                </div>
            </div>
        </div>
        <!-- 删除弹框 -->
        <div class="modal fade" id="modal-danger">
            <div class="modal-dialog modal-sm">
                <div class="modal-content bg-danger">
                    <div class="modal-header">
                        <h4 class="modal-title">删除确认</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>确定&quot;删除&quot;这些地址吗？（子地址也会删除）</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-light" data-dismiss="modal">
                            取消
                        </button>
                        <button type="button" class="btn btn-outline-light" data-dismiss="modal" id="delete">
                            确认
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>
</div>
<!-- jQuery -->
<script th:src="@{/system/js/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/system/js/bootstrap.bundle.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/system/js/select2.full.min.js}"></script>
<!-- Bootstrap Switch -->
<script th:src="@{/system/js/bootstrap-switch.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/system/js/adminlte.js}"></script>
<!-- Toastr -->
<script th:src="@{/system/js/toastr.min.js}"></script>
<!-- 自己 -->
<script th:src="@{/system/js/header.js}"></script>
<script th:src="@{/system/js/public.js}"></script>
<script th:src="@{/system/js/profile.js}"></script>
<script th:inline="javascript">
    var selfPost = [[${selfPost}]];
    let postBody = $('#postBody');
    postBody.empty(); // 清空例子
    if (selfPost === null || selfPost.length === 0) {
        postBody.text("还没有帖子哦！");
    }
    for (let i = 0; i < selfPost.length; i++) {
        let div = $('<div>').addClass('post');
        let a = $('<a>').css('color', '#000000').attr('href', '/post/detail/' + selfPost[i].postId)
            .attr('target', '_blank').addClass("post-title-hover");
        let h4 = $('<h4>').text(selfPost[i].postTitle);
        let h6 = $('<h6>').css('opacity', '0.5');
        let span1 = $('<span>').text(selfPost[i].petCategoryName).css('margin-right', '20px');
        let span2 = $('<span>').text(selfPost[i].postTypeName).css('margin-right', '20px');
        if (selfPost[i].postTypeName === '丢失') span2.css('color', '#dc3545');
        else span2.css('color', '#17a2b8');
        let eye = $('<i>').addClass('fas fa-eye');
        // h6
        h6.append(span1);
        h6.append(span2);
        h6.append(eye);
        h6.append(' ' + selfPost[i].views);
        // a
        a.append(h4);
        // div
        div.append(a);
        div.append(h6);
        // body
        postBody.append(div);
    }
</script>
</body>
</html>